<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="6" class="gutter-row">
        <div class="flex flex-box">

          <div class="icon-box">
            <el-icon :size="40" class="icon">
              <HelpFilled />
            </el-icon>
          </div>
          <div>
            <p>产品管理</p>
            <CountTo :startVal="0" :endVal="data.products" :duration="3000"></CountTo>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="gutter-row">
        <div class="flex flex-box">
          <div class="icon-box">
            <el-icon :size="40" class="icon">
              <Notebook />
            </el-icon>
          </div>
          <div>
            <p>Banner图</p>
            <CountTo :startVal="0" :endVal="data.banner" :duration="3000"></CountTo>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="gutter-row">
        <div class="flex flex-box">
          <div class="icon-box">
            <el-icon :size="40" class="icon">
              <Folder />
            </el-icon>
          </div>
          <div>
            <p>关于我们</p>
            <CountTo :startVal="0" :endVal="data.about" :duration="3000"></CountTo>

          </div>
        </div>
      </el-col>
      <el-col :span="6" class="gutter-row">
        <div class="flex flex-box">
          <div class="icon-box">
            <el-icon :size="40" class="icon">
              <Avatar />
            </el-icon>
          </div>
          <div>
            <p>用户</p>
            <CountTo :startVal="0" :endVal="data.users" :duration="3000"></CountTo>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { useStore } from 'vuex';
import { getCount } from '@/api/home_api'
import { CountTo } from 'vue3-count-to'
const $store = useStore();
const data: any = reactive({
  products: 0,
  banner: 0,
  about: 0,
  users: 0
})
onMounted(() => {
  if ($store.uid) {
    return false
  }
  //调用action函数，请求用户的信息
  $store.dispatch('get_user_api').then((res: any) => {
    console.log("成功了");
  });
});
onMounted(() => {
  Promise.all([
    getCount('products'),
    getCount('banner'),
    getCount('about'),
    getCount('users'),]).then((res: any) => {
      console.log(res);
      data.products = res[0]
      data.banner = res[1]
      data.about = res[2]
      data.users = res[3]
    })
})
</script>
<style lang='scss' scoped>
.gutter-row{
  height: 200px;
  background: #f0f2f5;
}
.flex {
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  background: #fff;
  height: 108px;
  margin: 50px 0;
  >div {
    font-weight: 700;
    margin: 26px;
    margin-left: 0;

    p {
      line-height: 18px;
      color: rgba(0, 0, 0, .45);
      font-size: 16px;
    }

    .icon-box {
      padding: 16px;
    }
  }
}

.icon {
  font-size: 50px;

  &:nth-child(1) {
    color: #40c9c6;
    
  }

  &:nth-child(2) {
    color: #36a3f7;
  }

  &:nth-child(3) {
    color: #f4516c;
  }

  &:nth-child(4) {
    color: #34bfa3;
  }
}

.flex-box {
  &:hover .icon {
    color: #fff;
  }

  &:hover .icon-box {
    background: #12d246;
    padding: 16px;
    -webkit-transition: all .38s ease-out;
    transition: all .38s ease-out;
    border-radius: 6px;
  }
}
</style>